<template>
  <div >
    <transition name="bounce">
      <div class="dialog-ctrl-body" v-if="dialogInit" v-show="isShow">
        <div class="dialog-ctrl ">
          <div class="dialog-header">
            <p>{{dialogInit.title}}</p>
          </div>
           <!-- {{dialogInit}} -->
          <div class="dialog-content">
              {{dialogInit.content}}
          </div>
          <div class="dialog-footer text-r">
             <button type="button" 
              class="btn btn-info"
              @click="cancel" >
              取消
            </button>
            <button type="button" 
              class="btn btn-danger"
              @click="confirm" >
              确认
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>

</template>

<script>
    export default {
      name: "isRealDialog",
      props:["dialogInit","dialogIsShow"],
      data(){
        return{
          isShow: false
        }
      },
      methods:{
        cancel() {
          this.isShow = false
        },
        confirm() {
          this.$emit('confirm');
          this.isShow = false
        }
      },
      watch: {
        dialogIsShow() {
          this.isShow = !this.isShow;
        }
      }
    }
</script>

<style scoped>
  .bounce-enter-active {
    animation: bounce-in 0.55s;
  }
  .bounce-leave-active {
    animation: bounce-in 0.55s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
